<template>
    <div>
        <div v-for="(item, index) in data_list" :key="index" class="col-sm-6 col-md-3 col-product">
            <a :href="'/item/?gid='+item.id">
                <img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/upload/'+item.img+''"	width="240" height="240">
            </a>
            <div class="thumb-overlay">
                <a :href="'/item?gid='+item.id" title="More Info">
                    <i class="fas fa-search-plus"></i>
                </a>
            </div>
            <h4><a :href="'/item/?gid='+item.id">{{item.name}}</a></h4>
            <p><span class="emphasis">${{item.price}}</span></p>
        </div>
        <div><!-- heyui分页逻辑 -->
            <Pagination v-model="pagination" @change="change" ></Pagination>
            <!-- layout='pager,jumper' -->
        </div>
    </div>
</template>

<script>
export default {
    name:'goodlist',
    data() {
        return {
            //商品列表变量
		data_list:[],
		//分页器变量
		pagination:{
			page:1,
			size:5,
			total:20,
		},
        }
    },
    mounted() {
        // 请求商品接口
		this.axios({
			url:'http://127.0.0.1:8000/goodslist_exam/',
			params:{
				page:1,
				size:5,
			}
		}).then(resp=>{
            // #赋值渲染
			this.data_list = resp.data.data
		})
    },
    methods: {
        // 分页器事件
		change(){
			this.axios({
			url:'http://127.0.0.1:8000/goodslist_exam/',
			params:{
				page:this.pagination.page,
				size:this.pagination.size,
			}
		}).then(resp=>{
			this.data_list = resp.data.data
		})
		}
    },
}
</script>

<style>

</style>